<template>
  <div ref="container" class="container" @scroll="handleScroll($event)">
    <div class="placeholder" :style="{ height: listHeight + 'px' }"></div>
    <div class="list-wrapper" :style="{ transform: getTransform }">
      <div class="caselist" v-for="(item, inde) in listData" :key="inde">
        <div class="header">
          <div class="headTop">
            <div class="headTopLeft">
              <div>
                <img class="headimg" v-lazy="item.avatar" alt="" />
              </div>
            </div>
            <div class="headTopRight">
              <div class="headname">
                <span class="name">{{ item.name }}</span>
                <span class="position">{{ item.type }}</span>
              </div>
              <div class="headaddr">
                <span>首都医科大学宣武医院</span>
              </div>
            </div>
          </div>
          <div class="headBottom"></div>
        </div>
        <div class="main" @click="toCaseDetail(item)">
          <div class="mainTop">
            <p>{{ item.title }}</p>
          </div>
          <div class="mainMain">
            <div class="caseimg" v-show="item.content.length == 1">
              <div>
                <img class="img9" v-lazy="item.content[0].img" alt="" />
              </div>
            </div>
            <div class="imgtap" v-show="item.content.length == 2">
              <div>
                <img class="img10" v-lazy="item.content[0].img" alt="" />
              </div>
              <div>
                <img class="img11" v-lazy="item.content[0].img" alt="" />
              </div>
            </div>
            <div class="caseimg" v-show="item.content.length == 3">
              <div>
                <img class="img1" v-lazy="item.content[0].img" alt="" />
              </div>
              <div>
                <img class="img2" v-lazy="item.content[0].img" alt="" />
              </div>
              <div>
                <img class="img3" v-lazy="item.content[0].img" alt="" />
              </div>
            </div>
            <div class="caseimg1" v-show="item.content.length == 4">
              <div class="imgtap">
                <div>
                  <img class="img5" v-lazy="item.content[0].img" alt="" />
                </div>
                <div>
                  <img class="img6" v-lazy="item.content[0].img" alt="" />
                </div>
              </div>
              <div class="imgtap">
                <div>
                  <img class="img7" v-lazy="item.content[0].img" alt="" />
                </div>
                <div>
                  <img class="img8" v-lazy="item.content[0].img" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="mainBottom">
            <div class="caseellipsis">
              <van-text-ellipsis :content="item.content[0].cpap" :rows="2" />
            </div>

            <!-- 案例 -->
            <div class="caseli">{{ item.cases }}·案例</div>
            <div></div>
          </div>
        </div>
        <div class="footer">
          <div>
            <span>
              <van-icon name="eye-o" size="55" />
            </span>
            <span>{{ item.browse }}</span>
          </div>
          <div @click="star(item)">
            <span>
              <van-icon
                name="star-o"
                size="55"
                :color="item.collectstate ? 'blue' : '#a0a0a0'"
              />
            </span>
            <span>{{ item.collect }}</span>
          </div>
          <div @click="like(item)">
            <span>
              <van-icon
                name="like-o"
                size="55"
                :color="item.praisestate ? 'red' : '#a0a0a0'"
              />
            </span>
            <span>{{ item.praise }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
const { listData, itemSize } = defineProps({
  listData: {
    type: Array,
    default: () => [],
  },
  itemSize: {
    type: Number,
    default: 100,
  },
});

const container = ref(null);
const containerHeight = ref(0);
const renderCount = computed(() => Math.ceil(containerHeight.value / itemSize));
const start = ref(0);
const offset = ref(0);
const end = computed(() => start.value + renderCount.value);
const listHeight = computed(() => listData.length * itemSize);

const getTransform = computed(() => `translate3d(0,${offset.value}px,0)`);

onMounted(() => {
  containerHeight.value = container.value.clientHeight;
});

function handleScroll(e) {
  const scrollTop = e.target.scrollTop;
  start.value = Math.floor(scrollTop / itemSize);
  offset.value = scrollTop - (scrollTop % itemSize);
}

// 点击跳转到案例详情
const toCaseDetail = (item) => {
  console.log(item);
  const val = encodeURIComponent(JSON.stringify(item));
  router.push(`/caseDetail?item=` + val);
};
// 点击星星收藏
const star = (item) => {
  axios.get("/api/collectstate?id=" + item.id).then((res) => {
    getCaseList();
  });
};
// 点击爱心喜欢
const like = (item) => {
  axios.get("/api/praisestate?id=" + item.id).then((res) => {
    getCaseList();
  });
};
</script>

<style scoped>
.container {
  height: 100%;
  overflow: auto;
  position: relative;
}

.placeholder {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}

.card-item {
  padding: 10px;
  color: #777;
  box-sizing: border-box;
  border-bottom: 1px solid #e1e1e1;
}
</style>
